<!DOCTYPE html>
<html>
  <head>
    <title>4PX-UED | 跨页全选交互</title>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="renderer" content="webkit">

<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/fpx.ued.css" type="text/css">
<link rel="stylesheet" href="css/fpx.ued.skyblue.css" type="text/css">
<link rel="stylesheet" href="css/fpx.ued.override.css" type="text/css">
<link rel="stylesheet" href="plugins/iconfont/iconfont.css" type="text/css">
<link rel="stylesheet" href="plugins/icheck/all.css" type="text/css">
<link rel="stylesheet" href="plugins/select2/select2.min.css" type="text/css">
<link href="plugins/validate/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
<link href="plugins/validate/tip.css" rel="stylesheet"  type="text/css" />
<link rel="stylesheet" href="plugins/layer/skin/layer.css" type="text/css" />
<link rel="stylesheet" href="css/fpx.ued.demo.css" type="text/css">

  </head>
  <body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
		<!-- Main Header -->
      <header class="main-header">
		<div class="topbar-head topbar-left">
			<a href="http://home.i4px.com/" class="topbar-logo topbar-left px-home" ><i class="iconfont icon-home"></i></a>
			<a href="index.html" class="topbar-home-link topbar-btn topbar-left">UED</a>
		</div>
		
		<div class="topbar-nav topbar-left dropdown" dropdown="">
			<a href="#" role="menuitem" aria-haspopup="true" class="dropdown-toggle topbar-btn topbar-nav-btn" data-toggle="dropdown">
				<span class="ng-binding">产品与服务</span>
				<i class="iconfont icon-xiangxia1"></i>
			</a>
			<!-- 顶级菜单 -->
			<div id="fpx-topmenu" class="dropdown-menu topbar-nav-list topbar-clearfix"></div>
		</div>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <li class="dropdown messages-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="iconfont icon-email"></i>
                  <span class="label label-success">0</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">你有 0 条消息未阅读</li>
                  <li>
                    <ul class="menu">
                      <li>
                        <a href="#">
                          <h5>
                            暂时没有新的消息
                          </h5>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="footer">
                    <a href="#">查看所有消息</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown notifications-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="iconfont icon-tongzhi"></i>
                  <span class="label label-warning">0</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">你有 0 条通知</li>
                  <li>
                    <ul class="menu">
                      <li>
                        <a href="#">
                          <h5>
                            暂时没有新的通知
                          </h5>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="footer">
                    <a href="#">查看所有通知</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown tasks-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="iconfont icon-mark"></i>
                  <span class="label label-danger">0</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">你有 0 个工作任务未做</li>
                  <li>
                    <ul class="menu">
                      <li>
                        <a href="#">
                          <h5>
                            暂时没有新的任务
                          </h5>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="footer">
                    <a href="#">查看所有任务</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown user user-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <img src="img/default_user.png" class="user-image" alt="User Image">
                  <span class="hidden-xs fpx-account">4px</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="user-header">
                    <img src="img/default_user.png" class="img-circle" alt="User Image">
                    <p>
                    <h4>
                      <div class="fpx-account">4px</div>
                    </h4>
                    </p>
                  </li>
                  <li class="user-footer text-center">
                    <button class="btn btn-primary btn-flat btn-changepsd">修改密码</button>
                    <a class="btn btn-default btn-flat btn-logout" href="/logout">注销</a>
                  </li>
                </ul>
              </li>
              
              <li>
                <a href="#" data-toggle="control-sidebar"><i class="iconfont icon-shezhi"></i></a>
              </li>
            </ul>
          </div>
        </nav>
        
        <!-- Control Sidebar -->
      <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
          <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="iconfont icon-skin"></i></a></li>
          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="iconfont icon-duoyuyan"></i></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <!-- Home tab content -->
          <div class="tab-pane active" id="control-sidebar-home-tab">
            <h3 class="control-sidebar-heading">Recent Activity</h3>
            <ul class="control-sidebar-menu">
              <li>
                <a href="javascript::;">
                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
                  <div class="menu-info">
                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
                    <p>Will be 23 on April 24th</p>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript::;">
                  <i class="menu-icon fa fa-user bg-yellow"></i>
                  <div class="menu-info">
                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
                    <p>New phone +1(800)555-1234</p>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript::;">
                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
                  <div class="menu-info">
                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
                    <p>nora@example.com</p>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript::;">
                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
                  <div class="menu-info">
                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
                    <p>Execution time 5 seconds</p>
                  </div>
                </a>
              </li>
            </ul><!-- /.control-sidebar-menu -->

            <h3 class="control-sidebar-heading">Tasks Progress</h3>
            <ul class="control-sidebar-menu">
              <li>
                <a href="javascript::;">
                  <h4 class="control-sidebar-subheading">
                    Custom Template Design
                    <span class="label label-danger pull-right">70%</span>
                  </h4>
                  <div class="progress progress-xxs">
                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript::;">
                  <h4 class="control-sidebar-subheading">
                    Update Resume
                    <span class="label label-success pull-right">95%</span>
                  </h4>
                  <div class="progress progress-xxs">
                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript::;">
                  <h4 class="control-sidebar-subheading">
                    Laravel Integration
                    <span class="label label-warning pull-right">50%</span>
                  </h4>
                  <div class="progress progress-xxs">
                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript::;">
                  <h4 class="control-sidebar-subheading">
                    Back End Framework
                    <span class="label label-primary pull-right">68%</span>
                  </h4>
                  <div class="progress progress-xxs">
                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
                  </div>
                </a>
              </li>
            </ul><!-- /.control-sidebar-menu -->

          </div><!-- /.tab-pane -->
          <!-- Settings tab content -->
          <div class="tab-pane" id="control-sidebar-settings-tab">
            <form method="post">
              <h3 class="control-sidebar-heading">Language Settings</h3>
              
              <div class="form-group">
              	<div class="col-md-6 text-center">
                	<img src="img/zh.jpg" />
               	 	<h6 style="color: #fff;">简体中文</h6>
              	</div>
              	<div class="col-md-6 text-center">
              		<img src="img/en.jpg" />
              		<h6 style="color: #fff;">English</h6>
              	</div>
              </div>

            </form>
          </div><!-- /.tab-pane -->
        </div>
      </aside><!-- /.control-sidebar -->
        
      </header>
		<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
	<!-- sidebar: style can be found in sidebar.less -->
	<section class="sidebar">

		<!-- /.search form -->
		<i class="iconfont icon-sanshuxian sidebar-toggle" data-toggle="offcanvas" role="button"></i>
		<ul class="sidebar-menu">
			<li class="active treeview">
				<a href="index.html"><i class="iconfont icon-logoued"></i> <span>UED详细介绍</span></a>
			</li>
			<li>
				<a href="layout.html"><i class="iconfont icon-layout"></i> <span>页面布局规范</span></a>
			</li>
			<li>
				<a href="color.html"><i class="iconfont icon-color"></i> <span>标准颜色规范</span></a>
			</li>
			<li>
				<a href="font.html"><i class="iconfont icon-font"></i> <span>标准字体规范</span></a>
			</li>
			<li>
				<a href="padding.html"><i class="iconfont icon-padding"></i> <span>界面元素间距规范</span></a>
			</li>
			<li>
				<a href="table.html"><i class="iconfont icon-table"></i> <span>常用表格</span></a>
			</li>
			<li>
				<a href="validate.html"><i class="iconfont icon-xiaoyan"></i> <span>表单校验</span></a>
			</li>
			<li>
				<a href="autoCompleter.html"><i class="iconfont icon-guanli"></i> <span>输入框自动联想</span></a>
			</li>
			<li class="treeview">
				<a href="#"><i class="iconfont icon-form"></i> <span>表单设计规范</span><i class="iconfont icon-more pull-right"></i></a>
				<ul class="treeview-menu">
					<li>
						<a href="form_layer.html"><i class="iconfont icon-yuanxingweixuanzhong"></i>通用双向联动表单布局</a>
					</li>
					<li>
						<a href="accross_page_check.html"><i class="iconfont icon-yuanxingweixuanzhong"></i>跨页全选交互</a>
					</li>
				</ul>
			</li>
			<li class="treeview">
				<a href="#"><i class="iconfont icon-component24"></i> <span>组件引用规范</span><i class="iconfont icon-more pull-right"></i></a>
				<ul class="treeview-menu">
					<li>
						<a href="component.html"><i class="iconfont icon-yuanxingweixuanzhong"></i>表单通用组件</a>
					</li>
					<li>
						<a href="component_control_sidebar.html"><i class="iconfont icon-yuanxingweixuanzhong"></i>侧边栏</a>
					</li>
					<li>
						<a href="info_box.html"><i class="iconfont icon-yuanxingweixuanzhong"></i>信息框</a>
					</li>
				</ul>
			</li>
			<li class="treeview">
				<a href="#popUp"><i class="iconfont icon-widget-fullcolumn"></i> <span>弹层规范</span><i class="iconfont icon-more pull-right"></i></a>
				<ul class="treeview-menu">
					<li>
						<a href="complexPopUp.html"><i class="iconfont icon-yuanxingweixuanzhong"></i>复杂双栏交互弹窗布局</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="popup_layer.html"><i class="iconfont icon-yicaozuo"></i> <span>操作交互弹出层</span></a>
			</li>
			<li>
				<a href="info_layer.html"><i class="iconfont icon-ui"></i> <span>信息提示弹层</span></a>
			</li>
			<li>
				<a href="icon.html"><i class="iconfont icon-icon"></i> <span>图标引用规范</span></a>
			</li>
			<li>
				<a href="plugins.html"><i class="iconfont icon-478chajianku"></i><span> 插件</span></a>
			</li>
			<li>
				<a href="browsers.html"><i class="iconfont icon-iconfont"></i><span> 浏览器支持</span></a>
			</li>
			<li>
				<a href="tmpl.html"><i class="iconfont icon-example"></i><span> 模板页面</span></a>
			</li>
			<li>
				<a href="download.html"><i class="iconfont icon-down"></i><span>下载UED</span></a>
			</li>
		</ul>

	</section>
	<!-- /.sidebar -->
</aside>
			
		<div class="content-wrapper">
        <section class="content-header">
          <span class="nav-title">跨页全选交互</span>
        </section>
        <!-- Main content -->
        <section class="content">
						<div class="box">
							<div class="px-grid text-center">
								<div class="px-grid-header">
									<div class="px-grid-header-content">
										<div class="px-grid-cell" style="width: 6%;"><input type="checkbox" name="allcheck" class="selectAll"></div>
										<div class="px-grid-cell" style="width: 20%;">客户编号</div>
										<div class="px-grid-cell" style="width: 74%;">...</div>
									</div>
								</div>
								<div class="px-grid-row operate" style="display: none;">
									<div class="px-grid-row-content">
										<div class="px-grid-cell">已选中<span class="checkNum">6</span>条数据 <a href="javascript:void(0)" class="checkToggle single">选择所有数据</a></div>
									</div>
								</div>
								<div class="px-grid-row">
									<div class="px-grid-row-content">
										<div class="px-grid-cell" style="width: 6%;"><input type="checkbox" name="chk" class="selectOne"></div>
										<div class="px-grid-cell px-ellipsis" style="width: 20%">CB000000000001</div>
										<div class="px-grid-cell" style="width: 74%">...</div>
									</div>
								</div>
								<div class="px-grid-row">
									<div class="px-grid-row-content">
										<div class="px-grid-cell" style="width: 6%;"><input type="checkbox" name="chk" class="selectOne"></div>
										<div class="px-grid-cell px-ellipsis" style="width: 20%">CB000000000001</div>
										<div class="px-grid-cell" style="width: 74%">...</div>
									</div>
								</div>
								<div class="px-grid-row">
									<div class="px-grid-row-content">
										<div class="px-grid-cell" style="width: 6%;"><input type="checkbox" name="chk" class="selectOne"></div>
										<div class="px-grid-cell px-ellipsis" style="width: 20%">CB000000000001</div>
										<div class="px-grid-cell" style="width: 74%">...</div>
									</div>
								</div>
								<div class="px-grid-row">
									<div class="px-grid-row-content">
										<div class="px-grid-cell" style="width: 6%;"><input type="checkbox" name="chk" class="selectOne"></div>
										<div class="px-grid-cell px-ellipsis" style="width: 20%">CB000000000001</div>
										<div class="px-grid-cell" style="width: 74%">...</div>
									</div>
								</div>
								<div class="px-grid-row">
									<div class="px-grid-row-content">
										<div class="px-grid-cell" style="width: 6%;"><input type="checkbox" name="chk" class="selectOne"></div>
										<div class="px-grid-cell px-ellipsis" style="width: 20%">CB000000000001</div>
										<div class="px-grid-cell" style="width: 74%">...</div>
									</div>
								</div>
								<div class="px-grid-row">
									<div class="px-grid-row-content">
										<div class="px-grid-cell" style="width: 6%;"><input type="checkbox" name="chk" class="selectOne"></div>
										<div class="px-grid-cell px-ellipsis" style="width: 20%">CB000000000001</div>
										<div class="px-grid-cell" style="width: 74%">...</div>
									</div>
								</div>
							</div>
						</div>
						<p class="lead"><b>布局说明：</b>所有数据列表采用瀑布流式布局，随着页面的滚动自动加载。点击全选框时，默认全选当前页面所有数据，同时在下拉提示区域显示已选中数据条数。在下拉提示区域可切换“选择所有数据”和“只选择本页数据”，并提示已选择数据条数。</p>
<pre class="prettyprint">
	<span class="btn-clipboard">源码</span>
  <code class="lang-html">
 /*
	 * 跨页全选， 选择所有数据
	 */
	$(".checkToggle").on("click", function() {
		var $this = $(this);
		if($this.hasClass("single")) {
			$this.removeClass("single");
			$this.html("只选本页数据");
			$(this).closest(".px-grid-cell").find(".checkNum").html("300");
		}else{
			$this.addClass("single");
			$this.html("选择所有数据");
			$(this).closest(".px-grid-cell").find(".checkNum").html("6");
		}
	}); 	
/**
	 * 全选
	 */
	$(".selectAll").on("ifClicked", function() {
		var $operate = $(".operate");
		var $this = $(this);
		var $chks = $this.closest(".px-grid").find('.px-grid-row input[type="checkbox"]');
		if($this.is(":checked")){  //之前没有选中
			for(var i=0; i<$chks.length; i++) {
				$($chks[i]).iCheck('uncheck');
				$operate.slideUp();
			}
		}else{
			for(var i=0; i<$chks.length; i++) {
				$($chks[i]).iCheck('check');
				$operate.slideDown();
			}
		}
	});
	
	/*
	 * 部分选，取消全选
	 */
	$(".selectOne").on("ifClicked", function() {
		var $this = $(this);
		var $selectAll = $(".selectAll");
		var allChks = $this.closest(".px-grid").find('.px-grid-row input[type="checkbox"]').length;  
		var chks = $this.closest(".px-grid").find('.px-grid-row input[type="checkbox"]:checked').length;
		
		if($this.is(":checked")) { //当前是选中
			$selectAll.iCheck("uncheck");	
		}else{
			if(allChks == (chks+1)){
				$selectAll.iCheck("check");
			}else{
				$selectAll.iCheck("uncheck");
			}
		}
	});	
  </code>	
</pre>						
					  
				</section>
			</div>
		</div>
		<script src="./plugins/jquery/jquery.min.js"></script>
<script src="./plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="./js/app.min.js"></script>
<script src="./js/fpx.topbar.js"></script>
<script src="./plugins/select2/select2.full.min.js"></script>
<script src="./plugins/icheck/icheck.min.js"></script>
<script src="./plugins/validate/jquery.validate.min.js"></script>
<script src="./plugins/validate/jquery.qtip.min.js"></script>
<script src="./plugins/validate/fpx.tip.js"></script>
<script src="./plugins/validate/fpx.validation.js"></script>
<script src="./plugins/layer/layer.js"></script>
<script src="./js/docs.js"></script>
<script src="./js/index.js"></script>
  </body>

</html>
